<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String url = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>会员列表</title>
    <link rel="stylesheet" href="<%=basePath%>css/AdminLTE.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath%>css/ionicons.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.css">
    <link rel="stylesheet" href="<%=basePath%>css/skins/_all-skins.min.css">  
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="<%=basePath%>css/sweetalert/sweetalert.css">
</head>
<body>
  <section class="content-header">
    <h1>
        我的工作台
        <small>停用会员列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">我的工作台</a></li>
        <li class="active">停用会员列表</li>
    </ol>
</section>

<section class="content" style="margin-left: 15px;margin-right: 15px;">
      <div class="row">
        <div class="col-sm-8 form-inline">
            <label for="month" class="control-label">会员编号</label>
            <input class="form-control" id="search_num" type="text" value="" size="6" style="margin-left:5px">
            <label for="month" class="control-label">会员姓名</label>
            <input class="form-control" id="search_name" type="text" value="" size="6" style="margin-left:5px">
            <label for="month" class="control-label">生日月份</label>
             <select class="form-control" id="search_month">
              <option value="">--</option>
              <option value="1">1月</option>
              <option value="2">2月</option>
              <option value="3">3月</option>
              <option value="4">4月</option>
              <option value="5">5月</option>
              <option value="6">6月</option>
              <option value="7">7月</option>
              <option value="8">8月</option>
              <option value="9">9月</option>
              <option value="10">10月</option>
              <option value="11">11月</option>
              <option value="12">12月</option>
           </select>
             <label for="search_sex"  class="control-label">性别</label>
            <select class="form-control" id="search_sex">
              <option value="">-</option>
              <option>男</option>
              <option>女</option>
           </select>

            <button id="search" type="button" class="btn bg-green">搜索</button>
        </div>

    </div>
         <table id="table" data-toolbar="#toolbar" data-content-type="application/x-www-form-urlencoded">
            <thead>
            <tr>
                <th>全选</th>
                <th>编号</th>
                <th>姓名</th>
                <th>联系电话</th>
                <th>生日</th>
                <th>卡上余额</th>
                <th>住址</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    <div class="modal fade" id="myModalMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            x
                        </button>
                        <h4 class="modal-title" id="myModalMsgLable">
                            会员信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                            <input type="hidden" id="cId"/>
                                <label for="cNum" class="col-sm-2 control-label">会员编号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="cNum" placeholder="会员编号">
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="cName" class="col-sm-2 control-label">会员姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="cName" placeholder="会员姓名">
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="phone" class="col-sm-2 control-label">联系电话</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="phone" placeholder="联系电话">
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="birthday" class="col-sm-2 control-label">生日</label>
                                <div class="col-sm-10">
                                    <input type="date" data-date-format="yyyy-mm-dd" class="form-control" id="birthday" placeholder="生日">
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="money" class="col-sm-2 control-label">卡上余额</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="money" placeholder="卡上余额">
                                </div>
                            </div>
                           <div class="form-group">
                                <label for="address" class="col-sm-2 control-label">住址</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="address" placeholder="住址">
                                </div>
                            </div>
                          <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10" style="margin-top: 7px;">
                                    <label>
                                        <input type="radio" name="sex" class="flat-red" checked value="男">
                                                                男
                                    </label>
                                    <label>
                                        <input type="radio" name="sex" class="flat-red" value="女">
                                                                女
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="clsMessage_btn">关闭</button>
                        <button type="button" class="btn btn-primary" id="doMessage_btn" onclick="addOrUpdateCustomer()">保存</button>
                    </div>
                </div>
            </div>
            </div>
    </section>
<script src="<%=basePath%>js/jquery-2.2.3.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-table.js"></script>
<script src="<%=basePath%>js/jquery.easyui.min.js"></script>
<script src="<%=basePath%>js/sweetalert/sweetalert.min.js"></script>
<script src="<%=basePath%>js/locales/bootstrap-table-zh-CN.js"></script>
<script src="<%=basePath%>js/locales/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">

$("#search").click(function(){
	$("#table").bootstrapTable('refresh');
});
//默认加载时携带参数  
function queryParams(params) { 
	var cNum=$("#search_num").val();
	var cName=$("#search_name").val();
	var birthMonth=$('#search_month option:selected').val();
	var sex=$('#search_sex option:selected').val();
    var temp = { 
      pageSize: params.limit,  
      pageStart: params.offset,  
      status:0,
      cNum:cNum,
      cName:cName,
      birthMonth:birthMonth,
      sex:sex,
    };  
    return temp; 
  } 
  
$("#table").bootstrapTable({
    url:"<%=basePath%>customer/getCustomerListByPage.do",
    method: "post",
    striped: true, //是否显示行间隔色
    cache: true, //是否使用缓存，默认为true
    pagination: true, //是否显示分页（*）
    queryParams: queryParams,//传递参数（*）
    sidePagination: "server",
    pageNumber:1, //初始化加载第一页，默认第一页
    pageSize:5,
    pageList: [5, 10, 20], //可供选择的每页的行数（*）
    showColumns: false, //是否显示所有的列
    showRefresh: true,
    minimumCountColumns: 2, //最少允许的列数
    clickToSelect: true, //是否启用点击选中行
    height: null, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: "id", //每一行的唯一标识，一般为主键列
    showToggle:true, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    columns: [{
        checkbox: true
    }, {
        field: 'cNum',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'cName',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'phone',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'birthday',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'money',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'address',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'sex',
        align: 'center',
        valign: 'middle'
    }, 
     {
     field: 'id',
     title: '操作',
     align: 'center',
     valign: 'middle',
     formatter: operateFormatter
     } 

    ],
});

function operateFormatter(value, row, index) { 
    return [
        '<button type="button" class="btn btn-default  btn-sm bg-orange" style="margin-right:15px;" onclick="updateCustomer('+row.id+')">修改</button>',
        '<button type="button" id="stop" class="btn btn-default  btn-sm bg-orange" style="margin-right:15px;" onclick="reStart('+row.id+')">启用</button>',
        '<button type="button" id="stop" class="btn btn-default  btn-sm bg-orange" style="margin-right:15px;" onclick="deleteCus('+row.id+')">删除</button>'
    ].join('');
}

function updateCustomer(id){
	$.ajax({  
	     type : "post",  
	     url : "<%=basePath%>customer/findCustomerById.do",  
	     data : {
	    	 id:id
	     }, 
	     success : function(data){  
	   	data = $.parseJSON(data);  
	   	$("#cId").val(data.id);
	   	$("#cNum").val(data.cNum);
	   	$("#cName").val(data.cName);
	   	$("#phone").val(data.phone);
	   	$("#birthday").val(data.birthday);
	   	$("#address").val(data.address);
	    $("input[type=radio][name=sex][value='"+data.sex+"']").attr("checked",true);  
	   	$("#money").val(data.money);
	   	$("#myModalMsg").modal("show");
	     }  
	     });  
}

function reStartCustomer(id){
	$.ajax({  
        type : "post",  
        url : "<%=basePath%>customer/updateCustomer.do",  
        data : {
        	id:id,
        	status:1
        	}, 
        success : function(data){  
      	  data = $.parseJSON(data);  
      	  if(data.result==1){
      	  swal({title:"操作提示",  
      		   text:data.msg,
      		 type:"success"}
      			  );
      	  }else{
      		swal({title:"操作提示",  
       		   text:data.msg,
       		   type:"error"}
       			  ); 
      	  }
      	  $("#table").bootstrapTable('refresh');
        }  
        });  
}

function deleteCustomer(id){
	$.ajax({  
        type : "post",  
        url : "<%=basePath%>customer/deleteCustomer.do",  
        data : {
        	id:id
        	}, 
        success : function(data){  
      	  data = $.parseJSON(data);  
      	  if(data.result==1){
      	  swal({title:"操作提示",  
      		   text:data.msg,
      		 type:"success"}
      			  );
      	  }else{
      		swal({title:"操作提示",  
       		   text:data.msg,
       		   type:"error"}
       			  ); 
      	  }
      	  $("#table").bootstrapTable('refresh');
        }  
        });  
}

function addOrUpdateCustomer(){
	var id= $("#cId").val();
 var cNum =$("#cNum").val();
 var cName=$("#cName").val();
 var phone=$("#phone").val();
 var birthday=$("#birthday").val();
 var money=$("#money").val();
 var address=$("#address").val();
 var sex=$('input:radio[name="sex"]:checked').val();
 var url="";
 if(id!=null&&id!=''){
	 url="<%=basePath%>customer/updateCustomer.do";
 }else{
	 url="<%=basePath%>customer/addCustomer.do";
 }
	$.ajax({  
     type : "post",  
     url : url,  
     data : {
    	 cNum:cNum,
    	 cName:cName,
    	 phone:phone,
    	 birthday:birthday,
    	 money:money,
    	 address:address,
    	 sex:sex,
    	 status:1,
    	 id:id
     }, 
     success : function(data){  
   	data = $.parseJSON(data);  
   	swal(data.msg);
   	$("#myModalMsg").modal("hide");
   	$("#table").bootstrapTable('refresh');
     }  
     });  
}

$("#add_btn").click(function () {
    $("#myModalMsg").modal("show");
});
$("#clsMessage_btn").click(function () {
    $("#myModalMsg").modal("hide");
});

function reStart(id){ 
    swal({ 
    	title: "您确定要启用吗？", 
        text: "您又想起他（她）啦？", 
        type: "warning", 
        showCancelButton: true, 
        closeOnConfirm: false, 
        confirmButtonText: "确定一定以及肯定", 
        cancelButtonText:"让我再考虑一下…",  
        confirmButtonColor: "#ec6c62" 
    }, function() { 
    	reStartCustomer(id);
    }); 
};
function deleteCus(id){ 
    swal({ 
    	title: "您狠得下心吗？", 
        text: "该会员所有信息将会销毁哦", 
        type: "warning", 
        showCancelButton: true, 
        closeOnConfirm: false, 
        confirmButtonText: "从此萧郎是路人", 
        cancelButtonText:"再考虑一下呗",  
        confirmButtonColor: "#ec6c62" 
    }, function() { 
    	deleteCustomer(id);
    }); 
};
</script>
</body>
</html>